<template>
    <div class="home">
         <div class="sear_warp">
                <div class="isear">
                    <div class="hlogo">
                        <b>康</b><span class="logoss">小康众筹</span>
                        </div>
                        <ul class="tab-list">
                            <li class="tab-item" @click="to1">小康众筹</li>
                            <li class="tab-item" @click="to2">热销榜单</li>
                            <li class="tab-item" @click="to3">每日新品</li>
                            </ul>
                                                    <span class="cart"><i class="iconfont icon-gouwuchekong" @click="togwc"></i>
                                                    <!-- <input disabled="true" v-model="num"/> -->
                                                    <b v-if="numshow">{{num}}</b>
                                                    </span>
                           <div class="forms">
                               <i class="iconfont icon-seach sousuo" @click="ffsearch"></i><input placeholder="搜一搜" v-model="searchs" @click.prevent="creat"/>
                               </div> 
                </div>
             
            </div>
             <div class="sea_warp" v-if="sea">
       <div class="sea">
            <div v-if="!isshow" class="never">
            暂时没有搜到任何商品，尝试其他关键词吧！！！
        </div>
        <div v-if="isshow">
            <span class="coun">为您找到<span>{{coub}}</span>条结果</span>
    <div class="sea_inner">
        <ul class="chearfix">
            <li v-for="(val,ind) in search" :key="ind" @click="detailes(val.p_id)">
               <p class="im"> <img :src="val.p_img"/></p>
                <p class="vpname">{{val.p_name}}</p>
                <p class="vpp">￥{{val.p_price}}</p>
            </li>
        </ul>
    </div>
        </div>
       </div>
    </div>
<div v-if="!sea"><router-view name="sear"></router-view></div>

    </div>
</template>

<script>
// import "https://www.swiper.com.cn/dist/js/swiper.min.js";
import {mapState,mapMutations,mapActions,mapGetters} from "vuex";
export default {
     inject:['reload'],
data () {
    
    return {
          searchs:"", 
          sty:"", 
            isshow:false,
        search:"",
        coub:"",
        sea:false,
    }
},
created () {
    console.log(this.sea)
     this.cartnum(this);  
},
mounted () {
    console.log("出发了啊")
},

methods: { to1()
    {
        this.$router.push("/crowd")
    },
    to2()
    {
        this.$router.push("/hot");
    },
    to3()
    {
        this.$router.push("/news")
    },
    detailes(p_id)
    {
         this.$router.push({path:"/details",query:{productid:p_id}});
         this.reload();
    },
    ffsearch()
    {
        console.log(this.searchs)
            // sessionStorage.setItem("search",this.search);
             
            // this.$router.push({
            //     path:"/ordinarySearch",query:{
            //         search:this.searchs
            //     }
            // })
            if(!this.searchs)
            {
                this.sea=false;
            }
            else{
                 this.sea=true;
                 this.$axios.post("http://127.0.0.1:8081/client/search",{searchs:this.searchs}).then(res=>
    {
        // console.log("ppp",res.data.val[0][0].counts)
        if(res.data.val[0][0].counts==0)
        {
            this.isshow=false;
        }
        else{
             this.isshow=true;
            this.search=res.data.val[1];
            this.coub=res.data.val[0][0].counts;
        }
    })
            }
           
        
    },
    togwc()
    {
        if(!sessionStorage.getItem("userid")){
            this.$message({
            type: 'info',
            message: '您还未登录'
          });  
        }
        else{
            this.reload();
            this.$router.push("/cart")
            

        }
        
    },
   creat()
    {
        var lett=this;
document.onkeydown=function(e){
var key=window.event.keyCode;
console.log(key)
if(key==13){
lett.ffsearch();
}
    }
},
...mapActions(["cartnum"]), 
},
computed: {
     ...mapState(["num","numshow"])
}
}
</script>


<style scoped>
.aaa{
    width: 100px;
    height: 100px;
    background: #333;
}
 
    /* .home .swiper-container .swiper-slide
    {
        border-radius: 20px;
    }
    .swiper-slide-active{
         border-radius: 20px;
    } */
   .hlogo{
        float: left;
    width: 300px;
    height: 51px;
    line-height: 51px;
    font-size: 24px;
    color:#845f3f;
   
}
.sear_warp{
 margin-bottom: 20px;
}
.hlogo b{
    color: #fff;
    background: #845f3f;
    display: inline-block;
  width: 51px;
  height: 51px;
  text-align: center;
  border-radius: 25px;
  margin-right: 10px
}
.isear{
     position: relative;
    height: 51px;
    z-index: 101;
    padding-top: 20px;
    margin: 0 auto;
    width: 1080px;
    margin-bottom: 5px;
    background-color: #fff;
}
.isear .forms{
    float:right;
    position: relative;
    width: 246px;
    padding-left: 35px;
    padding-top: 9px;
    height: 32px;
    border-bottom: 1px solid #e7e7e7;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
.isear .forms input{
    border: none;
        z-index: 1;
    width: 245px;
    height: 32px;
    line-height: 32px;
}
.isear .forms .sousuo{
        position: absolute;
    left: -4px;
    top: 10px;
    display: block;
    z-index: 2;
    text-align: center;
    outline: 0;
    font-size: 20px;
}
.tab-list{
    float: left;
    width: 420px;
    overflow: hidden;
}
.tab-item{
        float: left;
    margin-right: 32px;
    height: 51px;
    line-height: 57px;
    font-size: 20px;
    color: #666;
    -webkit-transition: color .2s ease;
    -o-transition: color .2s ease;
    transition: color .2s ease;
}
.cart{
    display: block;
    float:right;
    width: 30px;
    height: 51px;
    text-align: center;
    line-height: 51px;
    font-size: 20px;
    font-weight: bold;
    position:relative;
}
.cart b{
    font-size: 12px;
    color: #fff;
    text-align: center;
    line-height: 20px;
    display: block;
    width: 20px;
    height: 20px;
    background: #c00000;
    border-radius: 50%;
    position: absolute;
    top:6px;
    right: -10px;
}
.sea_warp{
    padding-bottom: 100px;
    background: #f2f2f2;
}
.sea{
    width: 1080px;
    margin: 0 auto;
}
.chearfix::after{
        clear: both;
    display: block;
    height: 0;
    overflow: hidden;
    /* font-size: 0; */
    content: ""
}
.sea_inner{
    margin-top: 20px;
}
.sea_inner li{
    float: left;
    width: 260px;
    background: #fff;
    margin:0 5px;
    cursor: pointer;

}
.sea_inner .im{
    text-align: center
}
.sea_inner img{
    width: 190px;;
}
.sea_inner p{
    padding: 10px 20px;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}
.vpp{
    color: #c00000;
    font-weight: bold
}
.never{
    text-align: center;
    font-weight: bold;
    padding: 200px;
    color: orange;
    font-size: 30px;
}
.coun{
    line-height: 60px;
    font-size: 16px;
    letter-spacing: 5px;
}
.coun span{
    color: orange;
    font-weight: bold
}

</style>
